<template>
  <div class="my-customer" v-if="customDetail && shops">
    <div class="top">
      <div class="left">
        <p class="name">{{ customDetail.name }}</p>
        <p class="tel">{{ customDetail.phone }}</p>
      </div>
      <div class="right">
        {{ customDetail.order.length }}
        <span>笔订单</span>
      </div>
    </div>
    <Scroll class="customer-scroll">
      <div class="content">
        <div class="item-info" v-for="(item, index) of customDetail.order" :key="index">
          <div class="left">
            <div class="time">
              <span class="road">{{ getShopName(item.shop_id) }}</span>
            </div>
            <div class="txt">
              <span class="name">{{item.brand_name}}</span>
              <span class="line">|</span>
              <span class="unit">积分</span>
              <span class="point">{{item.score ? '+' + item.score :  '--'}}</span>
            </div>
          </div>
          <div class="right">
            <img :src="require(`@/assets/images/${item.status}.png`)" alt />
          </div>
        </div>
        <add-brand-btn @addBrandBtn="handleAddBrandBtn" />
      </div>
    </Scroll>
    <transition name="slide">
      <router-view @brandChange="handleBrandChange"></router-view>
    </transition>
  </div>
</template>
<script>
import Scroll from '@/components/scroll/scroll'
import AddBrandBtn from '@/components/add-brand-btn'
import { getCustomDetail, editCustomBrand } from '@/api/my'
import ConfigList from '@/views/my/mixins/config-list'
const ERR_OK = 200
export default {
  components: {
    Scroll,
    AddBrandBtn
  },
  mixins: [ConfigList],
  data () {
    return {
      customDetail: null
    }
  },
  created () {
    if (this.$route.query.id) {
      this._getCustomDetail(this.$route.query.id)
    }
  },
  methods: {
    handleBrandChange (Obj) {
      console.log(this.$route.query.id)
      this._editCustomBrand({
        id: this.$route.query.id,
        shops: [{ shop_id: Obj.shop_id, brand_name: Obj.brand }]
      }).then(res => {
        if (res.code === ERR_OK) {
          this._getCustomDetail(this.$route.query.id)
        }
      })
    },
    handleAddBrandBtn () {
      if (this.$route.path === '/my/integral/my-customer') {
        this.$router.push({ path: '/my/integral/my-customer/add-brand', query: { id: this.$route.query.id } })
      } else if (this.$route.path === '/my/my-custom/custom-detail') {
        this.$router.push({
          path: '/my/my-custom/custom-detail/add-brand',
          query: { id: this.$route.query.id }
        })
      }
    },
    _getCustomDetail (id) {
      getCustomDetail(id)
        .then(res => {
          if (res.code === ERR_OK) {
            this.customDetail = res.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _editCustomBrand ({ id, shops }) {
      return editCustomBrand({ id, shops }).then(res => {
        if (res.code === ERR_OK) {
          return Promise.resolve(res)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";
.my-customer {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background: #fff;
  touch-action: none;
  padding-left: 0.36rem;
  box-sizing: border-box;
  .customer-scroll {
    position: absolute;
    top: 2.35rem;
    left: 0.36rem;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }
  .top {
    padding: 0.9rem 0 0.66rem 0;
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #000400;
    .left {
      padding-right: 1.16rem;
      border-right: 1px solid #e6e7e8;
      .name {
        font-size: 0.28rem;
        line-height: 0.28rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(4, 0, 0, 1);
      }
      .tel {
        font-size: 0.22rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(0, 4, 0, 1);
        line-height: 0.22rem;
        margin-top: 0.17rem;
      }
    }
    .right {
      font-size: 0.6rem;
      font-family: Abel;
      font-weight: 400;
      color: rgba(4, 0, 0, 1);
      padding-left: 1.15rem;
      span {
        font-size: 0.22rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(0, 4, 0, 1);
        margin-left: 0.22rem;
      }
    }
  }
  .content {
    width: 100%;
    padding-right: 0.36rem;
    box-sizing: border-box;
    .item-info {
      width: 100%;
      height: 1.8rem;
      // padding-left: 0.42rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgba(0, 4, 0, 0.3);
      font-size: 0;
      box-sizing: border-box;
      .left {
        .time {
          font-size: 0.26rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
        }
        .txt {
          margin-top: 0.3rem;
          span {
            font-size: 0.26rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(4, 0, 0, 1);
            vertical-align: middle;
          }
          .road {
            display: inline-block;
            width: 3rem;
            overflow: hidden;
            white-space: nowrap;
            @include ellipsis();
          }
          .line {
            padding: 0 0.2rem;
          }
          .name {
            margin-right: 0.1rem;
            white-space: nowrap;
          }
          .unit {
            margin-right: 0.1rem;
          }
        }
      }
      .right {
        width: 1.39rem;
        height: 0.98rem;
        img {
          width: 100%;
          vertical-align: top;
        }
      }
    }
  }
}
@include slideEnter();
</style>
